<template>
	<view class="orderBox">
		<u-navbar leftIconSize="0px" title="线下订单" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<uni-notice-bar 
			show-icon 
			scrollable
			text="仅展示线下业务类型订单:线下扫码、汇款、购房购车、收款订单、合作订单" 
		/>
		<view class="classifyBox">
			<view class="timeBox" @click="timeCheck">
				<text>{{classifyTime}}</text>
				<image src="../../../static/icons/order-InvertedTriangle.png"></image>
			</view>
			<view class="filterBox" @click="filterCheck">
				<text>筛选</text>
				<image src="../../../static/icons/order-InvertedTriangle.png"></image>
			</view>
		</view>
		<view class="content">
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无数据~</text>
			</view>
			<view class="tableData">
				<view class="list">
					<view class="monthDetails" style="background-image: url('../../../static/images/5514c35a66ff9e4bf460b452d59ff4.jpg');">
						<text class="month">10<text>月</text></text>
						<view class="transaction">
							<view>
								<text class="money">¥ 13.60</text>
								<text class="title">交易金额</text>
							</view>
							<view>
								<text class="money">¥ 13.60</text>
								<text class="title">退款金额</text>
							</view>
						</view>
						<view class="other">
							<view>
								<text class="money">¥ 13.60</text>
								<text class="title">实收</text>
								<uni-icons class="icon" color="#83858e" type="help-filled" size="18"></uni-icons>
							</view>
							<view>
								<text class="money">¥ 13.60</text>
								<text class="title">商家积分</text>
								<uni-icons class="icon" color="#83858e" type="help-filled" size="18"></uni-icons>
							</view>
							<view>
								<text class="money">¥ 13.60</text>
								<text class="title">平台手续费</text>
								<uni-icons class="icon" color="#83858e" type="help-filled" size="18"></uni-icons>
							</view>
						</view>
					</view>
					<view class="itemBox" @click="goOrderDetails(1)">
						<view class="orderType">
							<image src="../../../static/icons/order-ScanOrder.png"></image>
							<text>扫码订单-mg_wsk23a12sa3</text>
						</view>
						<text class="state accomplish">已完成</text>
						<!-- <view class="userInfo">
							<image src="../../../static/uni.png"></image>
							<text class="userAccount">mg_wsk23a12sa3</text>
							<text class="userTelPhone">15888288559</text>
						</view> -->
						<text class="officialReceipts">¥1.60</text>
						<text class="date">2024-10-25 22:36:14</text>
						<text class="paymentAmount">交易额：¥2.00</text>
					</view>
					<view class="itemBox">
						<view class="orderType">
							<image src="../../../static/icons/order-OfflineRemittance.png"></image>
							<text>线下汇款-mg_wsk23a12sa3</text>
						</view>
						<text class="state accomplish">已完成</text>
						<!-- <view class="userInfo">
							<image src="../../../static/uni.png"></image>
							<text class="userAccount">mg_wsk23a12sa3</text>
							<text class="userTelPhone">15888288559</text>
						</view> -->
						<text class="officialReceipts">¥1.60</text>
						<text class="date">2024-10-25 22:36:14</text>
						<text class="paymentAmount">交易额：¥2.00</text>
					</view>
					<view class="itemBox">
						<view class="orderType">
							<image src="../../../static/icons/order-BuyACarOrHouse.png"></image>
							<text>购房购车-mg_wsk23a12sa3</text>
						</view>
						<text class="state accomplish">已完成</text>
						<!-- <view class="userInfo">
							<image src="../../../static/uni.png"></image>
							<text class="userAccount">mg_wsk23a12sa3</text>
							<text class="userTelPhone">15888288559</text>
						</view> -->
						<text class="officialReceipts">¥1.60</text>
						<text class="date">2024-10-25 22:36:14</text>
						<text class="paymentAmount">交易额：¥2.00</text>
					</view>
					<view class="itemBox">
						<view class="orderType">
							<image src="../../../static/icons/order-CollectionCrder.png"></image>
							<text>收款订单-mg_wsk23a12sa3</text>
						</view>
						<text class="state accomplish">已完成</text>
						<!-- <view class="userInfo">
							<image src="../../../static/uni.png"></image>
							<text class="userAccount">mg_wsk23a12sa3</text>
							<text class="userTelPhone">15888288559</text>
						</view> -->
						<text class="officialReceipts">¥1.60</text>
						<text class="date">2024-10-25 22:36:14</text>
						<text class="paymentAmount">交易额：¥2.00</text>
					</view>
					<view class="itemBox">
						<view class="orderType">
							<image src="../../../static/icons/order-CooperativeOrder.png"></image>
							<text>合作订单-mg_wsk23a12sa3</text>
						</view>
						<text class="state accomplish">已完成</text>
						<!-- <view class="userInfo">
							<image src="../../../static/uni.png"></image>
							<text class="userAccount">mg_wsk23a12sa3</text>
							<text class="userTelPhone">15888288559</text>
						</view> -->
						<text class="officialReceipts">¥1.60</text>
						<text class="date">2024-10-25 22:36:14</text>
						<text class="paymentAmount">交易额：¥2.00</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<!--时间选择弹出层-->
		<uni-popup ref="timePopup" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="timePopup">
				<view class="classify">
					<text class="check">月份选择</text>
					<text>自定义</text>
				</view>
				<view class="monthSelectionBox" v-if="false">
					 <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="monthSelectionValue" @change="bindChange">
						<picker-view-column>
							<view class="item" style="text-align: center; line-height: 40px;" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" style="text-align: center; line-height: 40px;" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="customBox">
					<text class="title">交易时间</text>
					<view class="tradingHour">
						<text class="tradingHourCheck">今日</text>
						<text>昨日</text>
						<text>上月</text>
						<text>近三月</text>
						<text>近一年</text>
					</view>
					<text class="title">自定义</text>
					<view class="temporalIntervalBox">
						<text class="staTime">{{staTime == null ? '开始时间' : staTime}}</text>
						<view class="range"></view>
						<text class="endTime">{{endTime == null ? '结束时间' : endTime}}</text>
					</view>
					<view class="customTimeBox">
						<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="customTimeValue" @change="bindChange">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="buttonBox">
					<button class="reset">重置</button>
					<button class="confirm" @click="timeConfirm">确定</button>
				</view>
			</view>
		</uni-popup>
		<!--筛选弹出层-->
		<uni-popup ref="filterPopup" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="filterPopup">
				<text class="title">订单类型</text>
				<view class="orderTypes">
					<text>全部</text>
					<text>扫码订单</text>
					<text>线下汇款</text>
					<text>购车购房</text>
					<text>收款订单</text>
					<text>合作订单</text>
				</view>
				<text class="title">订单状态</text>
				<view class="orderStatus">
					<text>全部</text>
					<text>已完成</text>
					<text>已取消</text>
					<text>已退款</text>
				</view>
				<text class="title">订单编号</text>
				<view  class="orderReference">
					<input type="text" placeholder="请输入订单编号"/>
				</view>
				<text class="title">买家手机号</text>
				<view  class="mobile">
					<input type="text" placeholder="请输入买家手机号"/>
				</view>
				<text class="title">下单时间</text>
				<view class="temporalIntervalBox">
					<text class="staTime">{{staTime == null ? '开始时间' : staTime}}</text>
					<view class="range"></view>
					<text class="endTime">{{endTime == null ? '结束时间' : endTime}}</text>
				</view>
				<view class="buttonBox">
					<button class="reset">重置</button>
					<button class="confirm" @click="timeConfirm">确定</button>
				</view>
			</view>
		</uni-popup>
		<!--底部菜单（动态渲染）-->
		<customTab :activeRouter="activeRouter"></customTab>
	</view>
</template>

<script>
	import customTab from '@/components/customTab';
	export default {
		components:{
			customTab
		},
		created(){
			let routes = getCurrentPages(); //获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			this.activeRouter = '/' + curRoute;
		},
		onShow(){
			let token = uni.getStorageSync('mertoken')
			let exp = uni.getStorageSync('merexp')
			const now = Math.floor(Date.now() / 1000);
			
			if(!token || exp < now){
				this.$Router.push({
					path: '/pages/index/merlogin'
				})
			}
		},
		data(){
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 2025; i <= date.getFullYear()+10; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				activeRouter:'',
				classifyTime:"",
				years,
				months,
				days,
				year,
				month,
				day,
				monthSelectionValue:[],
				customTimeValue:[],
				indicatorStyle: `height: 40px;`,
				searchData:{},
				
				staTime:null,
				staTimeValue:[],
				endTime:null,
				endTimeValue:[],
				temporalIntervalActive:0,
				
			}
		},
		mounted() {
			this.monthSelectionValue = [this.years.indexOf(this.year),this.months.indexOf(this.month)]
			this.classifyTime = this.year +'-'+ (this.month.toString().length == 1 ? (`0${this.month}`) : this.month);
			this.staTimeValue = [this.years.indexOf(this.year),this.months.indexOf(this.month),this.days.indexOf(this.day)]
			this.endTimeValue = [this.years.indexOf(this.year),this.months.indexOf(this.month),this.days.indexOf(this.day)]
		},
		methods:{
			bindChange: function (e) {
				const val = e.detail.value
				this.monthSelectionValue = val;
				this.searchData = {
					type : 1,
					search:this.years[val[0]] + '-' + this.months[val[1]]
				};
				
			},
			timeCheck(){
				this.$refs.timePopup.open('bottom');
			},
			filterCheck(){
				this.$refs.filterPopup.open('bottom');
			},
			timeConfirm(){
				
			},
			goOrderDetails(id)
			{
				this.$Router.push({
					path: '/pages/merchant/orderDetails',
					query:{
						id
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.classifyBox{
		width: 100%;
		height: 55rpx;
		float: left;
		background-color: #f5f5f5;
		.timeBox{
			display: flex;
			align-items: center;
			width: auto;
			float: left;
			height: 100%;
			margin-left: 30rpx;
			text{
				font-size: 30rpx;
				float: left;
				color: #333132;
				font-weight: bold;
			}
			image{
				width: 25rpx;
				height: 25rpx;
				float: left;
				margin-left: 10rpx;
			}
		}
		.filterBox{
			width: auto;
			float: right;
			height: 100%;
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			text{
				font-size: 30rpx;
				float: left;
				color: #333132;
				font-weight: bold;
			}
			image{
				width: 25rpx;
				height: 25rpx;
				float: left;
				margin-left: 10rpx;
			}
		}
	}
	.content{
		width: 100%;
		position: fixed;
		top: 300rpx;
		bottom: 160rpx;
		z-index: 1;
		overflow-y: auto;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 350rpx;
				height: 350rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -175rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			margin-bottom: 20rpx;
			.list{
				width: calc(100% - 60rpx);
				float: left;
				height: auto;
				margin-left: 30rpx;
				margin-top: 50rpx;
				background-color: #fff;
				border-radius: 15rpx;
				.monthDetails{
					float: left;
					width: 100%;
					height: 265rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					border-top-right-radius: 15rpx;
					border-top-left-radius: 15rpx;
					.month{
						width: 90%;
						height: 20rpx;
						line-height: 15rpx;
						font-size: 75rpx;
						color: #323232;
						float: left;
						margin-left: 5%;
						font-weight: bold;
						text{
							margin-left: 8rpx;
							font-size: 34rpx;
						}
					}
					.transaction{
						width: 60%;
						float: right;
						margin-right: 5%;
						margin-top: 30rpx;
						height: 80rpx;
						display: grid;
						grid-template-columns: repeat(2,1fr);
						.money{
							width: 100%;
							height: 30rpx;
							float: left;
							line-height: 30rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #323232;
						}
						.title{
							width: 100%;
							height: 40rpx;
							float: left;
							margin-top: 8rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color:  #323232;
						}
					}
					.other{
						width: 90%;
						float: left;
						height: 80rpx;
						margin-left: 5%;
						margin-top: 35rpx;
						display: grid;
						grid-template-columns: repeat(3,1fr);
						.money{
							width: 100%;
							height: 30rpx;
							float: left;
							line-height: 30rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #323232;
						}
						.title{
							width: auto;
							height: 40rpx;
							float: left;
							margin-top: 8rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color:  #323232;
						}
						.icon{
							float: left;
							margin-top: 9rpx;
							margin-left: 5rpx;
						}
					}
				}
				.itemBox{
					width: calc(100%);
					height: 205rpx;
					float: left;
					// margin-left: 20rpx;
					// border-bottom:1rpx solid #f5f5f5;
					.orderType{
						width: calc(50% - 20rpx);
						float: left;
						height: 45rpx;
						margin-left: 20rpx;
						margin-top: 15rpx;
						image{
							width: 45rpx;
							height: 45rpx;
							float: left;
						}
						text{
							width: auto;
							max-width: calc(100% - 45rpx);
							float: left;
							font-size: 30rpx;
							line-height: 45rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: rgb(54, 54, 54);
						}
					}
					.state{
						width: calc(50% - 20rpx);
						float: right;
						margin-right: 20rpx;
						height: 45rpx;
						margin-top: 15rpx;
						line-height: 45rpx;
						text-align: right;
						font-size: 26rpx;
					}
					.accomplish{
						color: #4ca78c;
					}
					.accomplish:before{
						content: '';
						position: absolute;
						width: 15rpx;
						height: 15rpx;
						float: left;
						background-color: #4ca78c;
						margin-top: 15rpx;
						margin-left: -20rpx;
						border-radius: 50%;
					}
					.userInfo{
						width:calc(65% - 20rpx);
						height: 80rpx;
						float: left;
						margin-left: 20rpx;
						margin-top: 20rpx;
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							float: left;
						}
						.userAccount{
							width: calc(100% - 95rpx);
							height: 40rpx;
							line-height: 40rpx;
							float: left;
							margin-left: 15rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: rgb(71,71,71);
						}
						.userTelPhone{
							width: calc(100% - 95rpx);
							height: 40rpx;
							line-height: 40rpx;
							float: left;
							margin-left: 15rpx;
							font-size: 28rpx;
							color: rgb(155,155,155);
						}
					}
					.officialReceipts{
						width: calc(100% - 40rpx);
						float: right;
						height: 40rpx;
						margin-right: 20rpx;
						margin-top: 35rpx;
						text-align: right;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					.date{
						width: calc(50% - 20rpx);
						height: 40rpx;
						float: left;
						margin-left: 20rpx;
						line-height: 40rpx;
						font-size: 26rpx;
						margin-top: 25rpx;
						color: #b9b9b9;
					}
					.paymentAmount{
						width: calc(50% - 20rpx);
						height: 40rpx;
						float: right;
						margin-right: 20rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						margin-top: 25rpx;
						text-align: right;
						color: #b9b9b9;
					}
				}
			}
		}
	}
	.timePopup{
		width: 100%;
		height: auto;
		float: left;
		padding-bottom: 120rpx;
		.classify{
			width: 100%;
			height: 80rpx;
			border-bottom: 1rpx solid #f5f5f5;
			text{
				width: auto;
				float: left;
				height: 80rpx;
				font-size: 32rpx;
				line-height: 80rpx;
				margin-left: 30rpx;
				color: rgb(159,159,159);
			}
			.check{
				color: rgb(50, 50, 50);
				line-height: 72rpx;
			}
			.check:before{
				content: '';
				position: relative;
				float: left;
				width: 100%;
				height: 5rpx;
				border-radius: 5rpx;
				top:65rpx;
				background-color: #f9c234;
			}
		}
		.monthSelectionBox{
			width: 100%;
			height: 400rpx;
			float: left;
			.picker-view{
				width: 100%;
				height: 100%;
				float: left;
			}
		}
		.customBox{
			width: 100%;
			height: auto;
			float: left;
			.title{
				width: calc(100% - 60rpx);
				float: left;
				margin-left: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 28rpx;
				color: rgb(150,150,150);
				margin-top: 20rpx;
			}
			.tradingHour{
				width: calc(100% - 40rpx);
				float: left;
				margin-left: 20rpx;
				height: 50rpx;
				margin-top: 20rpx;
				display: grid;
				grid-template-columns: repeat(5,1fr);
				text{
					width: calc(100% - 20rpx);
					float: left;
					margin-left: 10rpx;
					height: 40rpx;
					border-radius: 5rpx;
					border:1rpx solid #8a8a8a;
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #8a8a8a;
				}
				.tradingHourCheck{
					background-color: #f9c234;
					color: #fff;
					border-color: #f9c234;
				}
			}
			.temporalIntervalBox{
				width: calc(100% - 60rpx);
				height: 60rpx;
				float: left;
				margin-left: 30rpx;
				margin-top: 20rpx;
				.endTime,.staTime{
					width: 45%;
					height: 100%;
					line-height: 60rpx;
					background-color: rgb(245, 245, 245);
					text-align: center;
					border-radius: 8rpx;
					font-size: 26rpx;
					color: rgb(170,170,170);
				}
				.staTime{
					float: left;
				}
				.endTime{
					float: right;
				}
				.range{
					width: 5%;
					float: left;
					margin-left: 2.5%;
					height: 2rpx;
					margin-top: 29rpx;
					background-color: rgb(204, 204, 204);
				}
			}
			.customTimeBox{
				width: 100%;
				height: 200rpx;
				margin-top: 20rpx;
				float: left;
				.picker-view{
					width: 100%;
					height: 100%;
					float: left;
					.item{
						text-align: center; 
						line-height: 40px;
					}
				}
			}
		}
		.buttonBox{
			width: 100%;
			height: 80rpx;
			float: left;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			button{
				width: 77.5%;
				height: 70rpx;
				margin-top: 8rpx;
				border-radius: 35rpx;
				line-height: 70rpx;
				font-size: 30rpx;
			}
			button::after{
				border-width: 0rpx;
			}
			.reset{
				float: left;
				margin-left: 15%;
				background-color: #fff;
				color: rgb(103,103,103);
				line-height: 68rpx;
				border:1rpx solid rgb(103,103,103);
			}
			.confirm{
				float: right;
				margin-right: 15%;
				background-color:#f9c234;
				color: #fff;
			}
			
		}
	}
	.filterPopup{
		width: 100%;
		height: auto;
		float: left;
		padding-bottom: 120rpx;
		.title{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 25rpx;
			color: rgb(52, 52, 52);
		}
		.orderTypes,.orderStatus{
			width: calc(100% - 40rpx);
			float: left;
			margin-left: 20rpx;
			height: auto;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			text{
				width: calc(100% - 20rpx);
				float: left;
				margin-left: 10rpx;
				margin-top: 20rpx;
				height: 55rpx;
				text-align: center;
				line-height: 55rpx;
				background-color: rgb(245, 245, 245);
				border-radius: 6rpx;
				font-size: 26rpx;
				color: rgb(51,51,51);
			}
		}
		.orderReference,.mobile{
			width: calc(100% - 60rpx);
			height: 60rpx;
			background-color: rgb(245, 245, 245);
			float: left;
			margin-top: 20rpx;
			margin-left: 30rpx;
			border-radius: 6rpx;
			input{
				width: 94%;
				float: left;
				margin-left: 3%;
				height: 100%;
				line-height: 60rpx;
				font-size: 26rpx;
			}
		}
		.temporalIntervalBox{
			width: calc(100% - 60rpx);
			height: 60rpx;
			float: left;
			margin-left: 30rpx;
			margin-top: 20rpx;
			.endTime,.staTime{
				width: 45%;
				height: 100%;
				line-height: 60rpx;
				background-color: rgb(245, 245, 245);
				text-align: center;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: rgb(170,170,170);
			}
			.staTime{
				float: left;
			}
			.endTime{
				float: right;
			}
			.range{
				width: 5%;
				float: left;
				margin-left: 2.5%;
				height: 2rpx;
				margin-top: 29rpx;
				background-color: rgb(204, 204, 204);
			}
		}
		.buttonBox{
			width: 100%;
			height: 80rpx;
			float: left;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			button{
				width: 77.5%;
				height: 70rpx;
				margin-top: 8rpx;
				border-radius: 35rpx;
				line-height: 70rpx;
				font-size: 30rpx;
			}
			button::after{
				border-width: 0rpx;
			}
			.reset{
				float: left;
				margin-left: 15%;
				background-color: #fff;
				color: rgb(103,103,103);
				line-height: 68rpx;
				border:1rpx solid rgb(103,103,103);
			}
			.confirm{
				float: right;
				margin-right: 15%;
				background-color:#f9c234;
				color: #fff;
			}
			
		}
	}
</style>